<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Mac官网主页</title>
		<link rel="stylesheet" type="text/css" href="css/05shopcar.css"/>
		<link rel="stylesheet" type="text/css" href="css/公共代码.css"/>
		<link rel="stylesheet" type="text/css" href="图标图标/iconfont.css"/>
	</head>
	<body>
		<!--一,首页列表板块 -->
		<header>
			<div id="box">
				<!-- 左 -->
				<div class="logo"><img src="img/logo.ico" ></div>
				<!-- 中 -->
				<ul class="listlef">
					<li><a href="">人气口红</a></li>
					<li><a href="">热卖底妆</a></li>
					<li><a href="">LISA同款</a></li>
					<li><a href="">全新柔雾唇釉</a></li>
					<li class="newPro">	<a href="">新品推荐</a>
						<div>
							<ul>
								<li><a href="">幻彩无暇粉底液</a></li>
								<li><a href="">全新魅可挚爱柔缎唇膏</a></li>
								<li><a href="">全新麻薯腮红</a></li>
								<li><a href="">定制遮瑕修容</a></li>
								<li><a href="">尤雾弹唇膏</a></li>
								<li><a href="">定制无暇柔光散粉</a></li>
							</ul>
						</div>
					</li>
					<li class="allPro"><a href="">全部产品</a>
						<div>
							<ul>
								<li><a href="">人气推荐</a></li>
								<li><a href="">彩妆</a></li>
								<li><a href="">妆前</a></li>
								<li><a href="">护肤</a></li>
								<li><a href="">扇子和工具</a></li>
							</ul>
						</div>
					</li>
					<li><a href="">会员中心</a></li>
					<li><a href="">门店专柜</a></li>
					<li><a href="">唇妆视频</a></li>
				</ul>
				<!-- 右 -->
				<div class="listrig">
					<ul>
						<a href=""><li class="iconfont icon-fangdajing"></li></a>
						<a href=""><li class="iconfont icon-youxiang"></li></a>
						<li><span class="reg"><a href="03reg.html">注册</a></span>/<span class="login"><a href="04login.html">登录</a></span></li>
					</ul>
				</div>
				<a href="05shopcar.html"><span class="shopcar iconfont icon-anquanshezhi"></span></a>
			</div>
		</header>
		<section>
			<div id="cartop">
				<p>购物车</p>
			</div>
			<div id="carmid">
				<table>
					<thead>
						<tr>
							<th><span>全选</span><input type="checkbox" name="" id="checkall"/></th>
							<th>产品</th>
							<th>单价</th>
							<th>数量</th>
							<th>小计</th>
							<th>操作</th>
						</tr>
					</thead>
					<tbody>
						
						<tr>
							<td>
								<input type="checkbox" class="checkbox">
							</td>
							<td class="firsttd">
								<img src="img/ia_600000005.webp" alt="">
								<span>魅可妆前底唇膏<br>Prep + Prime Lip<br>1.7 克</span>
							</td>
							
							<td>单价:¥<span class="price">180</span>元</td>
							
							<td>
								<button class="sub">-</button>
								<input type="text" class="count" value="0">
								<button class="add">+</button>
							</td>
							
							<td>小计:<span class="countprice">0</span>元</td>
							
							<td>
								操作:<button class="delete">删除</button>
							</td>
						</tr>
						<tr>
							<td><input type="checkbox" class="checkbox"></td>
							<td class="firsttd">
								<img src="img/ia_600000005.webp" alt="">
								<span>魅可妆前底唇膏<br>Prep + Prime Lip<br>1.7 克</span>
							</td>
							
							<td>单价:¥<span class="price">180</span>元</td>
							
							<td>
								<button class="sub">-</button>
								<input type="text" class="count" value="0">
								<button class="add">+</button>
							</td>
							
							<td>小计:<span class="countprice">0</span>元</td>
							
							<td>
								操作:<button class="delete">删除</button>
							</td>
						</tr>
						<tr>
							<td><input type="checkbox" class="checkbox"></td>
							<td class="firsttd">
								<img src="img/ia_600000005.webp" alt="">
								<span>魅可妆前底唇膏<br>Prep + Prime Lip<br>1.7 克</span>
							</td>
							
							<td>单价:¥<span class="price">180</span>元</td>
							
							<td>
								<button class="sub">-</button>
								<input type="text" class="count" value="0">
								<button class="add">+</button>
							</td>
							
							<td>小计:<span class="countprice">0</span>元</td>
							
							<td>
								操作:<button class="delete">删除</button>
							</td>
						</tr>
						
						<!-- 创造一个模板，没有名称和单价，直接往上面插 -->
						<!-- <tr id="templete">
							<td><input type="checkbox" class="checkbox"></td>
							<td class="firsttd">
								<!-- <img src="img/ia_600000005.webp" alt=""> -->
								<!-- <span>魅可妆前底唇膏<br>Prep + Prime Lip<br>1.7 克</span> -->
						<!-- 	</td>
							
							<td>单价 --><!-- :¥<span class="price"><!-- 180 --><!-- </span>元</td> --> -->
							
							<!-- <td>
								<button class="sub">-</button>
								<input type="text" class="count" value="0">
								<button class="add">+</button>
							</td> -->
							<!-- 
							<td>小计:<span class="countprice">0</span>元</td>
							
							<td> -->
							<!-- 	操作:<button class="delete">删除</button>
							</td>
						</tr> --> -->
						
						<tr id="lasttr">
							<td colspan="5">结算:商品一共<span class="totalcount">0</span>件商品;共计花费<span class="totalprice">0</span>元。 </td>
						</tr>
					</tbody>
				</table>
				
				<div id="groom">
					<h2>查看推荐</h2>
					<ul>
						<li>
							<img src="img/mac_sku_S6KN01_280x320_0.webp">
							<span>魅可妆前底唇膏<br>Prep + Prime Lip<br>1.7克</span>
							<button type="button"><a href="">查看明细</a></button>
						</li>
						<li>
							<img src="img/mac_sku_S6KN01_280x320_0.webp">
							<span>魅可妆前底唇膏<br>Prep + Prime Lip<br>1.7克</span>
							<button type="button"><a href="">查看明细</a></button>
						</li>
						<li>
							<img src="img/mac_sku_S6KN01_280x320_0.webp">
							<span>魅可妆前底唇膏<br>Prep + Prime Lip<br>1.7克</span>
							<button type="button"><a href="">查看明细</a></button>
						</li>
					</ul>
				</div>
				
			</div>
			<div id="carund">
					<p>我们承诺</p>
					<h2>顾客在本网站订购产品,在收到货物后7天内,发现有质量问题或损坏,可以咨询客服进行换货或退货。</h2>
			</div>
		</section>
		
		<footer>
			<div id="footbox">
				<ul>
					<li class="firstli">门店地址</li>
					<li><a href="">查找门店</a></li>
					<li><a href="">魅可定制美妆</a></li>
					<li class="firstli">会员</li>
					<li><a href="">会员中心</a></li>
				</ul>
				<ul>
					<li class="firstli">客户服务</li>
					<li><a href="">联系我们</a></li>
					<li>官方商城服务热线:</li>
					<li><a href="">400-602-9566</a></li>
					<li>专柜客户关怀热线:</li>
					<li><a href="">400-821-1308</a></li>
					<li><a href="">常见问题</a></li>
					<li><a href="">订单情况</a></li>
				</ul>
				<ul>
					<li class="firstli">关于我们</li>
					<li><a href="">品牌故事</a></li>
					<li><a href="">艾滋病基金会</a></li>
					<li><a href="">M·A·C魅可官网购物五大理由</a></li>
					<li><a href="">M·A·C魅可专业会员</a></li>
					<li class="firstli">公司地址</li>
					<li><a href="">上海市静安区延安中路1228号<br>静安嘉里中心三座11楼</a></li>
				</ul>
				<ul>
					<li class="firstli">账户</li>
					<li><a href="">账户</a></li>
					<li><a href="">订单状态</a></li>
					<li><a href="">我的收藏</a></li>
				</ul>
				<ul>
					<li class="firstli">链接</li>
						<li>
							<a href="">
								<span class="iconfont icon-25"></span>
								<span class="iconfont icon-dingwei1"></span>
								<span class="iconfont icon-xinlang"></span>
							</a>
						</li>
					<li><img src="img/ia_600000032.webp"></li>
				</ul>
			</div>
		</footer>
	</body>
	<script src="js/ajaxTools.js"></script>
	<script src="js/machine.js"></script>
	<script>
	// 第一部分:做购物车的加减删除运算
		let subList = $(".sub");//-
		let addList = $(".add");//+
		let deleteList = $(".delete");//删除键
		let countList = $(".count");//数量
		let countPriceList = $(".countprice");//小计
		let totalCount = $(".totalcount");//商品总数
		let totalPrice = $(".totalprice");//商品总价
		
		//第一步:先计算商品总数和商品总价，封装函数，然后后续由任何操作的时候，都需调用一下这个函数，保证价格数量实时更新
			//input是value，别的标签内容是innerHTML
			// 商品总数:所有数量input的和==循环数量list
			var complete = function(){
				let countList = $(".count");//数量
				let countPriceList = $(".countprice");//小计
				let totalcount = 0;//1.计算总数
				for(var i = 0; i < countList.length; i++){
						totalcount = totalcount + Number(countList[i].value);
					}
				totalCount.innerHTML = totalcount;
				
				let totalprice = 0;//2.计算总价
				for(var i = 0; i < countPriceList.length; i++){
					totalprice = totalprice + Number(countPriceList[i].innerHTML);
				}
				totalPrice.innerHTML = totalprice;
			}
		// 第二步:在carmid整体绑定单击事件的条件下操作加号减号删除号,且每次操作的时候都要调用封装函数，实时更新数量
		let carmid = $("#carmid");
		carmid.onclick = function(event){
			// 1.当操作的元素classname为add时
			var onclickDoing = event.target;//当前触发的元素时onclickDoing
			if(onclickDoing.className == "add"){
				var nowTr = onclickDoing.parentNode.parentNode;//获取当前元素所在的行
				var nowInput = nowTr.getElementsByClassName("count")[0];//获取当前元素所在行的input
				nowInput.value = parseInt(nowInput.value) + 1;//点击加号，当前值+1，赋值给input
				// 计算小计：数量x单价
				nowTr.getElementsByClassName("countprice")[0].innerHTML= Number(nowInput.value) *Number(nowTr.getElementsByClassName("price")[0].innerHTML);
				complete();
			}
			// 2.当操作的元素classname为sub时
			if(onclickDoing.className == "sub"){
				var nowTr = onclickDoing.parentNode.parentNode;
				var nowInput = nowTr.getElementsByClassName("count")[0];
				nowInput.value = parseInt(nowInput.value) - 1;//
				if(nowInput.value < 0){//不能让数量小于0
					nowInput.value = 0;
				}
				nowTr.getElementsByClassName("countprice")[0].innerHTML= Number(nowInput.value) *Number(nowTr.getElementsByClassName("price")[0].innerHTML);
				complete();
			}
			// 3.当操作的元素classname为delete时:删除当前行
			if(onclickDoing.className == "delete"){
				var nowTr = onclickDoing.parentNode.parentNode;
				nowTr.remove();
				complete();
			}
		}
		complete();//事件委托结束之后 再重新计算总数
		
		
		
		// 第二部分：做购物车的全选功能
			// 全选id:checkall  单选框class:checkbox
		// 1.获取元素
		var checkall = $("#checkall");
		var checkboxList = $(".checkbox");
		// 2.点击全选，让下面的复选框都变成选中状态
		checkall.onclick = function(){
			for(var i = 0; i < checkboxList.length; i++){
				// this.checked可以获取到当前复选框的状态
				checkboxList[i].checked = this.checked;
			}
		}
		// 3.当下面的复选框都是选中时，上面的全选也改变状态
		for(var i = 0; i < checkboxList.length; i++){
			checkboxList[i].onclick = function(){
				var a = true;//控制全选是否选中
				for(var j = 0; j < checkboxList.length; j++){
					//如果有一个没有被选中的话，那就不进入循环
					if(!checkboxList[j].checked){
						a = false;
						break;
					}
				}
				checkall.checked = a;//如果五个都在选中状态,就不用进入循环. 
			}
		}
	</script>
</html>

